<template>
	<view class="address-warp page-bg">
		
		<block v-if="items.length > 0">
			<view class="bank-list__item" v-for="item in items" :key='item.id'>
				<image class="bank-list__icon" src="../../static/common/icon_29.png"></image>
				<view class="bank-list__info">
					<view class="bank-list__name">{{item.bankName}}</view>
					<view class="bank-list__desc desc">储蓄卡 {{item.cardName | namePartOf}}</view>
					<view class="bank-list__num">{{item.cardNumber | cardNumPartOf}}</view>
				</view>
				<image class="bank-list__del" @click="del(item.id)" src="../../static/common/icon_05.png"></image>
			</view>
		</block>
		
		<none v-else :img="imgPath" :text="text"></none>
		
		
		<view class="page-submit" @click="bankAdd('/pages/mine/bankAdd')">+新增银行卡</view>
		<view class="footer-block"></view>
		
	</view>
</template>

<script>
	import none from '../../components/none.vue'
	import icon_none from '../../static/common/icon_none_02.png'
	import { api } from '../../utils/api.js'
	import  common  from '../../utils/common.js'
	export default{
		data() {
			return{
				imgPath: icon_none,
				text: '还没有添加银行卡哦',
				items: ''
			}
		},
		onShow() {
			this.getItems()
		},
		methods:{
			getItems() {
				let items = api.getUserCardsAsync({},(res) => {
					 this.items = res.items
				}) 
			},
			bankAdd(url) {
				this.$link(url)
			},
			del(id) {
				this.$showModal('', '您确定要删除银行卡吗?', () => {
					api.removeUserCardAsync({ id }, () => {
						this.getItems()
						this.$showToast('删除成功~')
					})
				})
			}
		},
		components:{
			none
		}
	}
</script>

<style scoped lang="less">
	@import url('../../app.less');
	.page-bg{
		padding: 20rpx 30rpx;
		box-sizing: border-box;
	}
	.bank-list__item{
		margin-bottom: 20rpx;
		.br;
		background-color: @f;
		.content-20;
		.flex-base;
		align-items: flex-start;
	}
	.bank-list__icon{
		width: 50rpx;
		height: 50rpx;
		border-radius: 100%;
		flex-shrink: 0;
		
	}
	.bank-list__info{
		padding: 0 20rpx;
		box-sizing: border-box;
		flex-grow: 2;
		.bank-list__desc{
			padding: 10rpx 0;
		}
		.bank-list__num{
			.fw;
			.f30;
		}
	}
	.bank-list__del{
		flex-shrink: 0;
		width: 26rpx;
		height: 26rpx;
	}
</style>
